<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>项目工时清单</span>
        <span
          style="float: right; padding: 3px 0; color: red; font-size: 12px"
          type="text"
          >注意事项：筛选阶段后，点击搜索按钮
        </span>
      </div>

      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="项目代码" prop="projectId">
          <el-select
            v-model="queryParams.projectId"
            placeholder="请选择项目代码"
            clearable
            filterable
            size="small"
          >
            <el-option
              v-for="item in projectOptions"
              :key="item.projectId"
              :label="item.projectCode"
              :value="item.projectId"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="部门模块" prop="level">
          <el-input
            v-model="queryParams.deptId"
            placeholder="请选择部门模块"
            clearable
            size="small"
          />
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-search"
            size="mini"
            @click="drawer = true"
          >
            筛选阶段
          </el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
            重置
          </el-button>
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['work:report:phour']"
          >
            导出
          </el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="phourList" stripe>
        <el-table-column label="模块" prop="deptName" />
        <el-table-column label="姓名" prop="nickName" />
        <el-table-column label="工号" prop="userName" />
        <el-table-column label="岗位性质" prop="postName" />
        <el-table-column label="阶段合计" prop="sum" />
        <el-table-column
          :label="item"
          v-for="(item, index) in headers"
          :key="index"
        >
          <template slot-scope="scope">
            <span v-for="(item2, index2) in scope.row.stage" :key="index2">
              {{ item2[item] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-drawer title="筛选阶段" :visible.sync="drawer">
      <div class="ml20 mr20">
        <el-card shadow="never">
          <el-checkbox
            border
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="checkedStages"
            @change="handleCheckedStagesChange"
          >
            <el-checkbox
              style="margin: 10px"
              v-for="item in stageOptions"
              :label="item.stageName"
              :key="item.stageId"
              >{{ item.stageName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getphour } from '@/api/work/report'
import { optionSelect as getProjects } from '@/api/work/project'
import { optionSelect as getStages } from '@/api/work/stage'

export default {
  name: 'Phour',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 项目工时清单
      phourList: [],
      // 动态头
      headers: [],
      // 项目代码选项
      projectOptions: [],
      // 开发阶段选项
      stageOptions: [],
      checkAll: true,
      checkedStages: [],
      isIndeterminate: true,
      // 筛选阶段
      drawer: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: null,
        deptId: null
      },
      // 表单参数
      form: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    /** 初始化 */
    init() {
      this.getProjectOptions()
      this.getStageOptions()
      this.loading = false
    },
    /** 搜索 */
    getList() {
      if (this.checkedStages && this.checkedStages.length > 0) {
        if (this.queryParams && this.queryParams.projectId) {
          this.loading = true
          let stageIds = this.stageOptions
            .filter((item) => this.checkedStages.indexOf(item.stageName) > -1)
            .map((a) => a.stageId)
          this.queryParams.stages = this.checkedStages
          this.queryParams.stageIds = stageIds
          getphour(this.queryParams).then((response) => {
            this.phourList = response.data
            this.loading = false
          })
        } else {
          this.$message.warning('提示：必须选择项目代码')
        }
      } else {
        this.$message.warning('提示：必须包含阶段，否则没有数据显示')
      }
    },
    /** 项目 */
    getProjectOptions() {
      getProjects().then((response) => {
        this.projectOptions = response.data
      })
    },
    /** 阶段 */
    getStageOptions() {
      getStages().then((response) => {
        this.stageOptions = response.data
        this.handleCheckAllChange(true)
      })
    },
    /** 阶段 全选 */
    handleCheckAllChange(val) {
      let stageNames = this.stageOptions.map((e) => e.stageName)
      this.checkedStages = val ? stageNames : []
      this.headers = this.checkedStages
      this.isIndeterminate = false
    },
    /** 阶段 选中的数组 */
    handleCheckedStagesChange(value) {
      this.headers = this.checkedStages
      let checkedCount = value.length
      this.checkAll = checkedCount === this.stageOptions.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.stageOptions.length
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      // 清空table
      this.phourList = []
      // 筛选阶段恢复全选
      this.checkAll = true
      this.handleCheckAllChange(true)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'work/report/phourexport',
        {
          ...this.queryParams
        },
        `项目工时清单_${new Date().getTime()}.xlsx`
      )
    }
  }
}
</script>

<style></style>
